<template>
  <div class="js">
    <section class="wrap">
      <img class="header" src="@/assets/js/aaa-b.png" alt="" srcset="">
      <div class="content">
        <div class="content-item">
          <div class="title">
            <img src="@/assets/js/banner2-001.png" alt="" srcset="">
            <span>免费砍价免费帮</span>
          </div>
          <div class="box">
            <div class="height87"></div>
            <br class="text1">一起帮是一个真人砍价互助平台，帮助别人砍价助力，就可以获得金币，你还可以做各种简单任务，赚更多金币。</br>
              来一起帮，不用骚扰亲朋好友，就可以完成砍价,每天动动手指，赚个1万2万金币轻轻松松！还有什么商品砍不到的！！！
            </p>

          </div>
        </div>

        <div class="content-item">
          <div class="title">
            <img src="@/assets/js/banner2-001.png" alt="" srcset="">
            <span>每日赚金币攻略</span>
          </div>
          <div class="box box2">
            <div class="height103"></div>
            <div class="box-title">
              <div class="line"></div>
              <div class="aside-title">
                ( 每天完成6次砍价任务 )<br> 耗时60秒 金币6000+
              </div>
              <div class="line"></div>
            </div>
            <div class="list">
              <div class="list-header">
                <span class="list-header-icon">1</span>
                <span class="list-header-txt">接任务</span>
              </div>
              <div class="list-content">
                <img src="@/assets/js/001.png" alt="" srcset="" style="width=80%">
              </div>
              <div class="list-header">
                <span class="list-header-icon">2</span>
                <span class="list-header-txt">一键打开拼夕夕</span>
              </div>
              <div class="list-content">
                <img src="@/assets/js/banner2-tu_2.png" alt="" srcset="" >
              </div>
              <div class="list-header">
                <span class="list-header-icon">3</span>
                <span class="list-header-txt">上传截图，助力完成</span>
              </div>
              <div class="list-content">
                <img src="@/assets/js/banner2-tu_3.png" alt="" srcset="" >
              </div>
            </div>
            <div class="box-title">
              <div class="line"></div>
              <div class="aside-title">
               超多任务类型砍价助力<br> 耗时60秒 金币5000+
              </div>
              <div class="line"></div>
            </div>
            <div class="show-list">
              <p class="show-list-title">*&nbsp;&nbsp;&nbsp;其他任务展示&nbsp;&nbsp;&nbsp;*</p>
              <img src="@/assets/js/other14.png" alt="" srcset="" class="otherclass">
            </div>
            <div class="box-title">
              <div class="line"></div>
              <div class="aside-title">
                ( 简单快捷平台任务 )<br>耗时40秒 金币5000+
              </div>
              <div class="line"></div>
            </div>
            <div class="show-list">
              <p class="show-list-title">*&nbsp;&nbsp;&nbsp;平台任务展示&nbsp;&nbsp;&nbsp;*</p>
              <img src="@/assets/js/other2.png" alt="" srcset="" class="otherclass">
            </div>
            <p class="footer-tips1">赚金币，就是这么简单愉快！<br>每天都不要错过噢～</p>
            <div class="footer-tips2">
              <p class="footer-tips2-icon colorFF334D">*</p>
              <p class="txt colorFF334D">友情提示：金币除了发布助力任务，还可以提现噢～</p>
            </div>
          </div>
        </div>

      </div>
    </section>
  </div>
</template>

<script>
  export default {
    name: 'js',
    data() {
      return {activeName: '1'}
    }
  }
</script>
<style>
  .js {
    font-size: 16px;
    background: #f95730;
  }
</style>
<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  html, body {
    width: 100%;
    height:100%!important;
  }

  .wrap {
    width: 100%;
  }

  .header {
    width: 100%;
  }

  .content {
    padding: 0 .96rem;
    margin-top: -0.24rem;
  }

  .content-item {
    width: 100%;
    position: relative;
    margin-bottom: 3.88rem;
  }
  .otherclass{
    width:100%;
    margin-left: 0rem;
  }

  .content-item .title {
    width: 100%;
    position: absolute;
    top: -1.92rem;
    left: 0;
    right: 0;
    margin: auto;
    height: 3.84rem;
  }

  .content-item .title img {
    height: 3.84rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .content-item .title span {
    width: 100%;
    height: 3.84rem;
    line-height: 3.84rem;
    font-size: 1.34rem;
    color: #fff;
    letter-spacing: .04rem;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
  }

  .content-item .box {
    padding: 0 1.92rem 1.92rem;
    background-color: #fff;
    border-radius: .96rem;
    font-size: 1.2rem;
    line-height: 1.92rem;
    letter-spacing: 0;
  }

  .height87 {
    width: 100%;
    height: 0.48rem;;
  }

  .content-item .box .text1 {
    color: #303133;
  }

  .content-item .box .text2 {
    color: #F9463C;
    text-align: center;
    margin-top: .72rem;
  }

  .content-item .box .text3 {
    font-size: 1.44rem;
    color: #F9463C;
    text-align: center;
    margin-top: .96rem;
    font-weight: bold;
  }

  .text4 {
    font-size: 1.36rem;
    color: #F9463C;
    text-align: center;
    margin-top: .96rem;
  }

  .content-item .box2 { /* padding: 0 0 1.92rem 1.92rem; */
  }

  .height103 {
    height: 4.12rem;
    width: 100%;
  }

  .content-item .box .box-title {
    display: flex;
    justify-content: space-between;
    align-items: center; /* padding-right: 1.92rem; */
  }

  .content-item .box .box-title .line {
    width: 3.92rem;
    border: .04rem dotted #FF334D;
    margin: 0 .32rem;
  }

  .content-item .box .box-title .aside-title {
    font-size: 1.2rem;
    color: #FF334D;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.76rem;
    font-weight: bold;
  }

  .content-item .box .list {
    width: 25rem;
    margin: 21px 0 2.56rem;
    border-left: 1px dotted #FF334D;
  }

  .content-item .box .list .list-header {
    height: 1.48rem;
    line-height: 1.48rem;
    position: relative;
    font-size: 1.04rem;
    color: #000000;
    letter-spacing: 0;
  }

  .content-item .box .list-header-icon {
    width: 1.68rem;
    height: 1.68rem;
    border-radius: 50%;
    font-family: PingFangSC-Medium;
    font-size: .96rem;
    color: #fff;
    line-height: 1.68rem;
    text-align: center;
    background-image: linear-gradient(-180deg, #FF334D 0%, #FF7642 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0.84rem;
    margin: auto;
  }

  .content-item .box .list-header-txt {
    margin-left: 1.48rem;
    font-weight: bold;
  }

  .content-item .box .list .list-content {
    height: 5.48rem;
    border: 1px solid #F1F1F1;
    border-radius: .64rem;
    margin: .96rem 0 1.44rem 1.48rem;
  }

  .content-item .box .list .list-content img {
    width: 100%;
  }

  .content-item .box .show-list {
    width: 22.64rem;
    margin: .96rem auto 2.56rem;
  }

  .content-item .box .show-list-title {
    font-family: PingFangSC-Regular;
    font-size: 1.04rem;
    color: #888888;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 1.92rem;
  }

  .content-item .box .show-list-img {
    width: 100%;
  }

  .content-item .box .footer-tips1 {
    font-family: PingFangSC-Medium;
    font-size: 1.44rem;
    color: #303133;
    letter-spacing: 0;
    text-align: center;
    font-weight: bold;
  }

  .content-item .box .footer-tips2 {
    font-family: PingFangSC-Regular;
    font-size: 1.2rem;
    color: #303133;
    letter-spacing: 0;
    line-height: 1.92rem;
    margin-top: 1.28rem;
    position: relative;
  }

  .content-item .box .footer-tips2-icon {
    width: .48rem;
    height: .48rem;
    line-height: .48rem;
    position: absolute;
    top: .72rem;
    left: 0;
  }

  .content-item .box .footer-tips2 .dot {
    border-radius: 50%;
    background: #303133;
  }

  .content-item .box .footer-tips2 .txt {
    margin-left: 1.12rem;
  }

  .colorFF334D {
    color: #FF334D;
  }
</style>
<script>
  (function (designWidth, maxWidth) {
    var doc = document, win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem, rootStyle;

    function refreshRem() {
      var width = docEl.getBoundingClientRect().width;
      if (!maxWidth) {
        maxWidth = 640;
      }
      ;
      if (width > maxWidth) {
        width = maxWidth;
      }
      var rem = (width * 25 / designWidth);
      rootStyle = "html{font-size:" + rem + 'px !important}';
      rootItem = document.getElementById('rootsize') || document.createElement("style");
      if (!document.getElementById('rootsize')) {
        document.getElementsByTagName("head")[0].appendChild(rootItem);
        rootItem.id = 'rootsize';
      }
      if (rootItem.styleSheet) {
        rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
      } else {
        try {
          rootItem.innerHTML = rootStyle
        } catch (f) {
          rootItem.innerText = rootStyle
        }
      }
      docEl.style.fontSize = rem + "px";
    };refreshRem();
    win.addEventListener("resize", function () {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener("pageshow", function (e) {
      if (e.persisted) {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
      }
    }, false);
    if (doc.readyState === "complete") {
      doc.body.style.fontSize = "16px";
    } else {
      doc.addEventListener("DOMContentLoaded", function (e) {
        doc.body.style.fontSize = "16px";
      }, false);
    }
  })(750, 750);
</script>



